@font_color_dark: #98cae6;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
@bgColor_dark: #000c17;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
@itemHover_color_light: #dbedff;
@itemHover_color_dark: #0c304a;

.config-panel {
  height: 100vh;

  :deep(.container) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    >.el-tabs {
      overflow-y: scroll;
      display: flex;
      flex-grow: 1;
      >.el-tabs__header{
        .el-tabs__active-bar {
          left: 0px;
        }
      }
      .el-tabs__active-bar + .el-tabs__item{
        margin-left: 20px;
      } 
      >.el-tabs__content {
        overflow: auto;
        flex-grow: 1;
        .el-form {
          .el-form-item {
            align-items: center;
          }
          .el-form-item__content {
            overflow: visible;
          }
          .el-form-item__error {
            position: relative;
            top: 3px;
            padding-top: 0;
            padding-bottom: 3px;
            white-space: normal;
            word-break: break-word;
          }
          .base-option {
            .el-form-item__content {
              display: flex;
              min-height: 40px;
              align-items: center;
            }
          }
        }
        .mapping-table {
          .el-form-item {
            .el-form-item__content {
              margin-left: 0 !important;
              .el-input__icon {
                line-height: 40px;
              }
            }
          }
          .mapping-scope {
             color: #F56C6C;
             margin-right: 4px;
             position: absolute;
             left: -5px;
             top: 25%;
          }
        }
        .panel-data {
          .content {
            padding: 0 10px;
            
          }
        }
      }
    }
    :deep(.el-table) {
      .cell {
        padding: 0 3px !important;
      }
      td,
      th {
        padding: 5px 0 !important;
      }
    }

    :deep(.el-form){
      >div{
        clear: both;
        &:hover{
          background-color: @itemHover_color_light;
        }
      }
    }
    :deep(.el-form-item:hover) {
      background-color: @itemHover_color_light;
    }
    :deep(.css-style-editor){
      >div:hover{
        background-color: @itemHover_color_light;
      }
    }

  }

  .save_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    flex-shrink: 0;
    position: fixed;
    width: 300px;
    bottom: 0;
    .saveBtn {
      padding: 8px 25px;
      border-radius: 5px;
    }
  }




  .dark {
    :deep(.el-tabs) {
      background-color: @background_color_dark;

      // 头部
      .el-tabs__nav-wrap {
        &::after {
          background-color: #203645;
        }

        .el-tabs__nav-scroll {
          .el-tabs__active-bar {
            background-color: @font_color_active_dark;
          }

          .el-tabs__item {
            color: @font_color_dark;

            &:hover {
              color: @font_color_active_dark;
            }
          }

          .is-active {
            color: @font_color_active_dark;
          }
        }
      }

      // 内容块
      .el-tabs__content {
        .style-title {
          color: @font_color_dark;
          .el-divider--horizontal {
            background-color: @borderColor_dark;
          }
        }
        .el-form-item__label {
          color: @font_color_dark;
        }
        
        .el-form-item__content{
          .carousel{
            color: @font_color_dark;
          }
        }

        .el-input {
          .el-input__icon, .el-select__icon {
            color: @borderColor_dark;
          }
        }

        .el-radio-group {
          .el-radio {
            color: @textColor_dark;

            .el-radio__input {
              .el-radio__inner {
                border: 1px solid @font_color_active_dark;
                background-color: unset;
              }
            }

            .is-checked {
              .el-radio__inner {
                &::after {
                  background-color: @font_color_active_dark;
                }
              }
            }

            .el-radio__label {
              color: #fff;
            }
          }
          .is-checked{
            .el-radio__label{
              color: #00f0ff;
            }
          }
        }

        .color-radio-group {
          .el-radio-button {
            background-color: #064559;

            .el-radio-button__inner {
              background-color: #064559;
            }
          }

          .is-active {
            .el-radio-button__inner {
              background-color: #00f0ff;
            }
          }

          .color-img {
            width: 20px;
            height: 20px;
          }
        }

        .base-option-color{
          .color-theme {
            background-color: #064559;
            .inner{
              border-color: #064559;
            }
            .new{
              background-color: #0eb4c2;
              color: white;
            }
          }
        }

        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: @font_color_active_dark;
        }

        .input-number {
          .el-input-number__decrease {
            background-color: #000c17;
            border-color: #116584;
            color: #116584;
          }

          .el-input-number__increase {
            background-color: #000c17;
            border-color: #116584;
            color: #116584;
          }
        }

        .demo-upload-list {
          background-color: @background_color_dark;
          border-color: @borderColor_dark;
        }

        .icon-library-open {
          background-color: @background_color_dark;
          border-color: @borderColor_dark;
        }

        .slider-number {
          color: @textColor_dark;
        }

        .slider-number-left {
          color: @textColor_dark;
        }

        .el-slider {
          .el-slider__runway {}
        }

        .slider-number-right {
          color: @textColor_dark;
        }

        .el-switch__core {
          background-color: #064559;
          border-color: #064559;
        }

        .el-switch.is-checked {
          .el-switch__core {
            background-color: #0EB4C2;
            border-color: #0EB4C2;
          }
        }

        // 默认按钮样式
        .btn-sure {
          background-color: #0eb4c2;
          border-color: #0eb4c2;
          color: #fff;

          .el-icon {
            color: #fff;
          }
        }

        // 颜色选择器
        .el-color-picker {
          .el-color-picker__trigger {
            border-color: @borderColor_dark;

            .el-color-picker__color {
              border: unset;
            }

            .el-color-picker__icon {
              color: #fff;
            }
          }
        }

        // 表格
        .config-panel-table {
          color: @font_color_dark;
          background-color: @background_color_dark;

          &::before {
            background-color: @background_color_dark;
          }

          .cell {
            padding: 0 3px !important;
          }
          td,
          th {
            padding: 5px 0 !important;
          }

          .el-table__header {
            th {
              background-color: #122b40 !important;
              border-color: #122b40;
              color: @font_color_dark;
            }
          }

          .el-table__body {
            tr {

              td {
                background-color: @background_color_dark;
                border-color: @background_color_dark;

                .icon-library-open {
                  background-color: unset;
                  border-color: #0eb4c2;
                }
              }
            }
          }

          .el-table__empty-block {
            background-color: #093758;

            .el-table__empty-text {
              color: @font_color_active_dark
            }
          }
        }

        .item-tabs {
          .el-tabs {
            border-color: @borderColor_dark;

            .el-tabs__header {
              background-color: unset;
              border-color: @borderColor_dark;

              .is-active {
                background-color: #0b3252;
                border-color: @borderColor_dark;
              }
            }
          }

        }

        .group-config {
          border-color: @borderColor_dark;

          .group-name-config {
            background-color: #0b3252;
            color: #fff;
          }
        }

        // 参考线
        .markLine {
          .value {
            .el-input__inner::-webkit-inner-spin-button {
              -webkit-appearance: none;
            }

            .el-input__inner::-webkit-outer-spin-button {
              -webkit-appearance: none;
              /* 有无看不出差别 */
            }
          }
        }

        .jump-panel-wrapper{
          .el-upload-dragger{
            border-color: #116584;
            background-color: unset ;
            .el-icon-upload{
              color: #fff;
            }
            .el-upload__text{
              color: #fff;
              em{
                color: #00f0ff;
              }
            }
            &:hover {
              border-color: #00f0ff; 
            }
          }
          .el-textarea{
            .el-textarea__inner{
              background-color: unset;
              color: #fff;
              border-color: #116584;
            }
          }
          .jump-text{
            color: #fff;
            span{
              color: #00f0ff;
            }
          }
        }

        .gradient-color-container{
          .num-tag{
            .l-num-tag{
              color: #98cae6;
            }
            .r-num-tag{
              color: #98cae6;
            }
          }
        }
        // 数据页签
        .panel-data {
          .btn-preview {
            padding: 6px 15px;
            border-radius: 0;
            background-color: #0eb4c2;
            color: #fff;
            border: unset;
          }

           table{
             color: #98cae6;
           } 
        }

        .el-table {
          color: @font_color_dark;
          background-color: @background_color_dark;

          &::before {
            background-color: @background_color_dark;
          }

          .el-table__header {
            th {
              background-color: #122b40 !important;
              border-color: #122b40;
              color: @font_color_dark;
            }
          }

          .el-table__body-wrapper {
            background-color: @background_color_dark;
            .el-table__body {
              tr {
                td {
                  background-color: @background_color_dark;
                  border-color: @background_color_dark;
                }
              }
            }
          }
          
        }

        .markLine {
          .switch {
            .text {
              font-size: 14px;
              color: @font_color_dark;
            }

            .value {
              .el-input__inner::-webkit-inner-spin-button {
                -webkit-appearance: none;
              }

              .el-input__inner::-webkit-outer-spin-button {
                -webkit-appearance: none;
                /* 有无看不出差别 */
              }
            }
          }
        }

        .preview {
          background-color: #122b40;
          color: @font_color_dark;
        }

        // 联动页签
        .panel-property {
          .form-card {
            background-color: @background_color_dark;
            border: 1px solid @borderColor_dark;
          }
        }

        .option-collapse{
          .el-collapse{
            border-top: 1px solid #116584;
            border-bottom: 1px solid #116584;
            .el-collapse-item{
              .el-collapse-item__header{
                background-color: #064559;
                border-color: #071f30;
                color: #98cae6;
              }
              .el-collapse-item__wrap{
                background-color: transparent;
                border-bottom: 1px solid #116584;
                .el-collapse-item__content{
                  background-color: transparent;
                }
              }
            }
          }
        }
      }

      .el-form{
        >div{
          clear: both;
          &:hover{
            background-color: @itemHover_color_dark;
          }
        }
      }
      .el-form-item:hover {
        background-color: @itemHover_color_dark;
      }
      .css-style-editor{
        >div:hover{
          background-color: @itemHover_color_dark;
        }
      }

    }

    // 默认按钮样式
    .saveBtn {
      background-color: #0eb4c2;
      border-color: #0eb4c2;
      color: #fff;
    }

    :deep(.echart_table) {
      th,
      td {
        color: #e4e7ed;
        border-color: #064559;
      }
    }

    :deep(.el-loading-mask) {
      background-color: rgba(0, 0, 0, 0.72);
    }

    ::-webkit-scrollbar {
      width: 4px !important;
      height: 4px !important;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #00f0ff !important;
    }

    ::-webkit-scrollbar-track {
      background-color: #1a405f !important;
    }

    ::-webkit-scrollbar-corner {
      background-color: #1a405f !important;
    }

  }

  .light {
    :deep(.el-tabs) {
      .el-tabs__content {

        .color-radio-group {

          .color-img {
            width: 20px;
            height: 20px;
          }
        }

        // 表格
        .config-panel-table {

          &::before {
          }

          .el-table__header {
            th {
              background-color: #F5F5F5;
              border-color: #F5F5F5;
            }
          }

          .el-table__body {
            tr {

              td {
              }
            }
          }
        }
      }
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ::-webkit-scrollbar-track {
      background-color: #EFEFEF;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #65C7F8;
    }

    ::-webkit-scrollbar-corner {
      background-color: #EFEFEF;
    }
  }
}